<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="../common/vue.min.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->


<ul id="vm_ul">
    <li v-for="item in items">
        {{$index}} -- {{item.message}}
    </li>

    <hr/>
    指定别名：
    <li v-for="(item,v) in items">
        {{$index}} ++ {{v.message}}
    </li>
    <hr/>
    template:
    <template v-for="(item,v) in items">
        <li>{{$index}} >>>> {{v.message}}</li>
        <b><<<<<<<<<<<<<<</b>
        <b>>>>>>>>>>>>>>></b>
    </template>
    <hr/>
    track-by
    <template v-for="(item,v) in items" track-by="uid">
        <li>{{$index}} >>>> {{v.message}}</li>
        <b><<<<<<<<<<<<<<</b>
        <b>>>>>>>>>>>>>>></b>
    </template>

    <hr/>
    强制track-by $index:
    <template v-for="(item,v) in items" track-by="$index">
        <li>{{$index}} >>>> {{v.message}}</li>
        <b><<<<<<<<<<<<<<</b>
        <b>>>>>>>>>>>>>>></b>
    </template>


    <hr/>
    循环对象obj:
    <template v-for="(key,value) in object" track-by="$index">
        <li>{{$index}} >>>>{{key}}: {{value}}</li>
        <b><<<<<<<<<<<<<<</b>
        <b>>>>>>>>>>>>>>></b>
    </template><br/>
     ----------------------
    <template v-for="value in object" track-by="$index">
        <li>{{$index}} >>>>{{$key}}: {{value}}</li>
        <b><<<<<<<<<<<<<<</b>
        <b>>>>>>>>>>>>>>></b>
    </template>
    <br/>------------------
    <li v-for="v in 10">
        {{$index}} ++ {{v}}
    </li>

</ul>


<script type="text/javascript">


    var vm = new Vue({
        el: "#vm_ul",
        data: {
            items: [
                {message: 'li1', uid: 001},
                {message: 'li2', uid: 002}
            ],
            object:{
                key1:"hello",
                key2:"world",
                key3:"for alls"
            }
        }
    })

    vm.items.push({message: "li3"});

    vm.items = vm.items.filter(function (item) {
        console.log(item);
        return item.message
    })
    vm.items.push({message: 'li4', uid: 001})
    vm.items.push({message: 'li1', uid: 001})






</script>

</body>
</html>